<template >
  <div class="warpper" v-show='$store.state.addIsShow'>
      <div class="close" @click="close">x</div>
      <input type="text" v-model="contact" placeholder="联系人">
      <input type="text" v-model="password" placeholder="密码">
      <input type="text" v-model="phone" placeholder="电话">
      <input type="text" v-model="pro" placeholder="省">
      <input type="text" v-model="city" placeholder="市">
      <input type="text" v-model="area" placeholder="区">
      <div class="sure" @click="send">确定</div>
  </div>
</template>

<script>
import { AddBigCustomer} from '../api/bigcustomer'
export default {
data(){
    return{
        contact:'',
        password:'',
        phone:'',
        pro:'',
        city:'',
        area:'',
    }
},
methods:{
    close(){
        this.$store.commit('changeAdd')
    },
    send(){
       
        let data={
            contactsName:this.contact,
            password:this.password,
            phone:this.phone,
            province:this.pro,
            city:this.city,
            area:this.area,
        }
        for(let i in data){
            if(data[i]==''){
                alert('请完善你的信息')
                return
            }
        }

        AddBigCustomer(data).then(res=>{
            alert(res.msg)
             this.$store.commit('changeAdd')
        })

    }
}
}
</script>

<style scoped>
input{
    outline: none;
}
.warpper{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position:absolute;
    top: 40%;
    left: 47%;
    width: 200px;
    height: 220px;
    padding:20px 0;
    background-color: #ddd6d5;
}
.sure{
    cursor: pointer;
    position: absolute;
    background-color: #64d9d6;
    padding: 2px;
    border-radius: 5px;
    right: 0;
    bottom: 0;
}
.close{
    padding: 5px;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #fff;
    color: red;
    cursor: pointer;
}
</style>